import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
// 10.封装列表组件，实现列表组件的高可复用性
class Index extends Component {
  static defaultProps = {
    type: 'row'
  }
  // 1.充分利用组件化思想变成，一个ui视图封装一个组件
  render() {
    // 11.通过父子组件通讯，实现一级、二级、三级分类数据渲染
    const { list, type } = this.props
    return (
      <div className={ type }>
        {
          list.length > 0 && list.map((v, i) => {
            return (
              <dl key={i} 
                onClick={ () => this.props.history.push({
                  pathname: '/detail',
                  state: v
                })}
              >
                <dt><img src={v.url} alt="" /></dt>
                <dd>
                  <h3>{v.title}</h3>
                  <p>{v.desc}</p>
                </dd>
              </dl>
            )
          })
        }
      </div>
    );
  }
}

export default withRouter(Index);
